<template>
    <div>
        <zck-header></zck-header>
        <!-- 主题内容 -->
    <div class="main">
      <!-- 主题内容分为两部分，所以要解决高度坍塌问题 -->
      <div class="center clearfix">
        <div class="left">
          <div class="bread">
            <a href="#"><b>首页</b></a>
            <span>>课程详情</span>
            <span>>全能报过班</span>
          </div>
          <div class="bg"></div>
          <div class="powerful">
            <h2>全能保过班</h2>
            <p>
              <img
                src="../assets/image/a-1.png"
                alt=""
              />目标分数&nbsp;&nbsp;&nbsp;&nbsp;42-50-65-79 全分段
            </p>
            <p>
              <img
                src="../assets/image/a-2.png"
                alt=""
              />学员基础&nbsp;&nbsp;&nbsp;&nbsp;雅思5分 + 或者CET4级以上
            </p>
            <p>
              <img
                src="../assets/image/a-3.png"
                alt=""
              />开课时间&nbsp;&nbsp;&nbsp;&nbsp;每周开班
            </p>
            <p>
              <img
                src="../assets/image/a-4.png"
                alt=""
              />开班周期&nbsp;&nbsp;&nbsp;&nbsp;一直服务到考生考过为止
            </p>
          </div>
          <div class="video">
            <div class="v-left">
              <img src="../assets/image/d-1.png" alt="" />
              <h3>试听课程</h3>
            </div>
            <div class="v-right">
              <img src="../assets/image/d-2.png" alt="" />
              <h3>课程解析</h3>
            </div>
          </div>
          <div class="detail">
            <div class="detail1">
              <h2>课程信息</h2>
              <ul>
                <li>
                  <b>课程简介</b>
                  <p>
                    萤火虫教研组依据权威实验精心制定授课内容，萤火虫顶级名师生动讲解带练，帮助考生高效直击做题技巧；
                    循环听课制为考生打造全分数段保过屏障，搭配课后练习巩固系统，助力考生全方位掌握PTE提分内核。
                  </p>
                </li>
                <li>
                  <b class="tc">课程特色</b>
                  <p>
                    1. 萤火虫顶级名师授课； 2. 基于权威教研制定授课内容； 3.
                    快速全面梳理应试技巧； 4. 专属私人学习计划； 5.
                    每日刷题班强化巩固技巧； 6. 课后每日练习反馈批改； 7.
                    学习顾问全程跟进监督。
                  </p>
                </li>
                <li>
                  <b class="speo">适用人群</b>
                  <p>
                    1.未系统参加过PTE培训的考生 2.备考时间较为充裕的考生
                    3.英文实力与目标分数相差三档以内的考生（一档为雅思成绩中的0.5分）
                  </p>
                </li>
              </ul>
            </div>
            <div class="detail2">
              <h2>课程阶段</h2>
              <div class="first">
                <div>
                  <b>第一阶段</b>
                  <h2>核心技巧精讲课程</h2>
                </div>
                <div>
                  <span>展开</span>
                  <img src="../assets/image/first.png" alt="" />
                </div>
              </div>
              <div class="first second">
                <div>
                  <b>第二阶段</b>
                  <h2>真题强化带练课程</h2>
                </div>
                <div>
                  <span>展开</span>
                  <img src="../assets/image/second.png" alt="" />
                </div>
              </div>
              <div class="first third">
                <div>
                  <b>第三阶段</b>
                  <h2>每日答疑解惑课程</h2>
                </div>
                <div>
                  <span>展开</span>
                  <img src="../assets/image/third.png" alt="" />
                </div>
              </div>
            </div>
            <div class="detail3">
              <h2>课后专属服务</h2>
              <ul>
                <li>VIP 私人定制学习计划</li>
                <li>VIP 考前评估+私人定制考前冲刺计划</li>
                <li>赠送6个月萤火虫APP和网站的VIP会员享用权</li>
                <li>每周专属学习顾问跟进学习情况</li>
              </ul>
            </div>
            <div class="detail1">
              <h2>课程政策</h2>
              <ul>
                <li>
                  <b>保过政策</b>
                  <p>
                    在考生考到目标分数前，可以持续享受我们每周的14小时刷题班，每天7小时的云端答疑室，每周的2小时的名师专家门诊Consultation。然后我们会持续在考生的学习群里进行作业批改和反馈，做考前评估并制定学习计划，直到考生考过为止！
                  </p>
                </li>
                <li>
                  <b class="tuik">退款政策</b>
                  <p>
                    如果考生上完第一节课，不满意，在上第二节课之前24小时内，向学习顾问说明，是可以无条件全额退款。
                  </p>
                </li>
              </ul>
            </div>
            <div class="detail4">
              <h4>常见问题</h4>
            </div>
          </div>
        </div>
        <div class="right">
          <p>推荐课程</p>
          <ul>
            <li>
              <a href="./blue.html"
                ><h4>全能保过班</h4>
                <span
                  >萤火虫教研组依据权威实验精心制定授课内容，萤火虫顶级名师生动讲解带练，帮助考生高效直击做题技巧；</span
                ></a
              >
            </li>
            <li>
              <a href="./green.html"
                ><h4>进阶保过班</h4>
                <span
                  >本课程的核心技巧讲解分为两个部分，首先全面梳理PTE各项题型内容和技巧，保证考生全方位掌握PTE拿分内核；再由名师进行1v1私人专项辅导，帮助考生实现弱点能力提升</span
                ></a
              >
            </li>
            <li>
              <a href="./orange.html"
                ><h4>1v1私人订制班</h4>
                <span
                  >1v1课程会依据考生当前考试分数和能力水准，制定专属提分计划；授课教师会在课上对提分技巧进行讲解和带练，帮助考生高效提升弱项题型；在课程最终生成阶段性复习计划，结合课后反馈体系，帮助考生巩固所学技巧。</span
                ></a
              >
            </li>
            <li>
              <a href="./red.html"
                ><h4>VIP保过班</h4>
                <span
                  >本课程的核心技巧讲解分为三个部分，全面梳理PTE各项题型内容和技巧，保证考生全方位掌握PTE拿分内核；再由名师进行5小时私人专项辅导，帮助考生实现弱点能力提升；最后进行15小时名师带练技巧巩固，实现考生做题能力的强化和拔高。</span
                ></a
              >
            </li>
          </ul>
          <div>
            <img src="../assets/image/class-ewm.jpg" alt="" />
            <p>扫码课程咨询</p>
          </div>
        </div>
      </div>
    </div>
        <zck-footer></zck-footer>
    </div>
</template>

<script>

    export default {}
  
</script>

<style lang="scss" scoped>
/* **********主题内容*********** */
.main{
    background-color: #F5F6FA;
}
.main .left,.right{
    float: left;
    background-color: #fff;
    margin-top: 20px;
    box-sizing: border-box;
}
/* *******左侧部分********* */
.main .left{
    width: 670px;
    position: relative;
    left: -150px;
    padding-bottom: 50px;
    margin-bottom: 80px;
}
.main .left .bread,.bg{
    margin-left: 25px;
    margin-top: 10px;
}
.main .left .bread{
    font-size: 15px;
    color: rgba(0,0,0, .6);
}
.main .left .bg{
    width: 622px;
    height: 255px;
    background-color: #7AC5E8;
    background: url("../assets/image/blue.png");
}
.main .left .powerful{
    width: 550px;
    height: 263px;
    background-color: #fff;
    border-radius: 15px;
    position: absolute;
    top: 95px;
    left: 60px;
     /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
     box-shadow: 3px 2px 15px 5px rgba(0, 0, 0, 0.2);
     box-shadow: -3px -2px 15px 0.5px rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     color: rgba(0,0,0, .8);
     padding-top: 38px;
     padding-left: 25px;
}
.main .left .powerful img{
    width: 12px;
}
.main .left .powerful :nth-child(2) {
    margin-top: 30px;
}
.main .left .powerful p{
    font-size: 12px;
    margin-top: 10px;
}

.main .left .video .v-left,.v-right{
    float: left;
    width: 263px;
    height: 80px;
    border-radius: 10px;
    background-color: #F8F9FB;
    margin-top: 95px;
    box-sizing: border-box;
    padding-left: 50px;
    padding-top: 20px;
    margin-bottom: 25px;
}
.main .left .video .v-left{
    margin-left: 60px;
    margin-right: 30px;
}
.main .left .video .v-right{
    margin-right: 50px;
}
.main .left .video .v-left img, h3{
    float: left;
}
.main .left .video .v-right img, h3{
    float: left;
}
.main .left .video h3{
    line-height: 40px;
    margin-left: 30px;
}
.main .left .detail1,.detail2,.detail3{
    margin-left: 60px;
    margin-right: 50px;
    /* margin-right: 600px; */
    color: rgba(0,0,0, .8);
}
.main .left .detail .detail1 h2{
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 25px;
} 
/* .main .left .detail h5,p{
    font-size: 13px;
    float: left;
} */
.main .left .detail .detail1 ul li{
    /* margin-bottom: 50px; */
    display: flex;
    list-style: none;
}
.main .left .detail .detail1 ul{
    font-size: 13px;
}
.main .left .detail .detail1 ul li b{
    width: 170px;
    position: relative;
    top:10px;
    margin-right: 20px;
}
.main .left .detail .detail1 ul li .speo{
    margin-right: -15px;
}
.main .left .detail .detail1 ul li .tc{
    margin-right: 15px;
}
.main .left .detail .detail1 ul li p{
    line-height: 30px;
    position: relative;
    top: -7px;
}

.main .left .detail .detail2 .first,.second,.third{
    width: 558px;
    height: 110px;
    border-radius: 20px;
    margin-top: 15px;
    margin-bottom: 30px;
}
.main .left .detail .detail2 .first{
    background-color: #ECE9FF;
    color: #6A55D7;
    display: flex;
    box-sizing: border-box;
    
    padding-top: 25px;
    padding-left: 25px;
}
.main .left .detail .detail2 .first h2{
    margin-top: 10px;
}
.main .left .detail .detail2 .first span{
    position: relative;
    top: 10px;
    right: -220px;
}
.main .left .detail .detail2 .first img{
    width: 25px;
    height: 25px;
    position: relative;
    top: 15px;
    right: -230px;
}
.main .left .detail .detail2 .second{
    background-color: #FFF4E7;
    color: #E46324;
}
.main .left .detail .detail2 .third{
    background-color: #EAF5FF;
    color: #3C6EE3;
}
/* *************课后专属服务************* */
.main .left .detail .detail3 ul{
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.main .left .detail .detail3 ul li{
    font-size: 13px;
    line-height:30px;
}
/* *********课程政策*********** */
.main .left .detail .detail1 ul li .tuik{
    margin-right: -50px;
}
/* ********常见问题********* */
.main .left .detail .detail4{
    width: 558px;
    height: 54px;
    background-color: #F5F6FA;
    box-sizing: border-box;
    margin-top: 15px;
    margin-left: 60px;
    padding-left: 16px;
    line-height: 54px;
}
.main .detail5{
    height: 80px;
    background-color: #F5F6FA;
}
/* **********右侧部分********** */
.main .right{
    width: 278px;
    position: relative;
    left: -120px;
    padding-bottom: 20px;
}
.main .right ul{
    list-style: none;
}
.main .right ul,p{
    margin-left: 25px;
    padding-top: 10px;
}
.main .right ul a{
    color: #fff;
}
.main .right ul li:nth-child(1){
    
    background-image: url("../assets/image/blue.png");
}
.main .right ul li:nth-child(2){
    background-image: url("../assets/image/green.png");
}
.main .right ul li:nth-child(3){
    background-image: url("../assets/image/orange.png");
}
.main .right ul li:nth-child(4){
    background-image: url("../assets/image/red.png");
}
.main .right ul li{
    width: 233px;
    height: 116px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    
}
.main .right ul li h4{
    font-family:Cooper Black;
    margin: 30px 0 15px 15px;
}
.main .right ul li span{
    margin-left: 15px;
}
.main .right div img{
    display: block;
    width: 168px;
    height: 168px;
    /* margin-bottom: -10px; */
    margin: 0 auto ;
}
.main .right div p{
    /* margin-bottom: -20px; */
    text-align: center;
    margin-left: 0px;
    padding-top: 0px;


}











</style>